<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%     
	String path = request.getContextPath();     
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";     
%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>新增项目</title>
	<base href="<%=basePath%>"/>
	<%@ include file="../../cuv_include.jsp"%>
	<link rel="stylesheet" href="<%=basePath%>/js/uploadify/css/uploadify.css" type="text/css"></link>
	<script language="JavaScript" type="text/javascript" src="<%=basePath%>js/my97/WdatePicker.js" defer="defer"></script>
	<script type="text/javascript" src="<%=basePath%>/js/uploadify/jquery.uploadify-3.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.form.js"></script>
	<style type="text/css"> 
	  fieldset,legend,form,table,tr,td,textarea{margin:0;padding:0}
	  form label {font-weight:bold;}
	  table{margin:10px 10px};
	  td{line-height: 40px;}
	  input[type="text"]{width:250px;}
	  input[type="password"]{width:250px;}
	  input[type="textarea"]{width:250px;}
	</style>
<script type="text/javascript">
	var projectId = null;
  $(document).ready(function(){
	  $("#allRoles").dblclick(function(){
    	  var value = $("#allRoles").val();
          moveRight(value);
      });

      $("#selectedRoles").dblclick(function(){
    	  var value = $("#selectedRoles").val();
    	  moveLeft(value);
      });

      $("#btn_right").click(function(){
    	  var value = $("#allRoles").val();
          moveRight(value);
      });

      $("#btn_left").click(function(){
    	  var value = $("#selectedRoles").val();
    	  moveLeft(value);
      });
      
      $("#btn_allright").click(function(){
    	  moveRightAll();
      });

      $("#btn_allleft").click(function(){
    	  moveLeftAll();
      });
	  
	  
      $("#enname").focus();
      
      var options = {dataType: 'json', beforeSubmit: beforeSubmit, success: process};
      $("#userForm").submit(function(){
    	  $("#btn_insert").attr("disabled","disabled");
          $(this).ajaxSubmit(options);
          return false;
      });
      
      $("#file_upload").uploadify({   
          'height'        : 27,    
          'width'         : 80,     
          'buttonText'    : '添加附件',   
          'removeCompleted': false,         //上传完毕上传列表是否去除 
          'fileSizeLimit': '50MB',          //上传文件大小设置 单位可以是B、KB、MB、GB 
          'swf'           : '<%=basePath%>js/uploadify/uploadify.swf',   
          'uploader'      : '<%=basePath%>pjcost/project/upload.do',   
          'auto'          : false,   
          'formData'      : {'projectId':''},  
          'fileTypeExts'  : '*.*',   
          'onUploadStart' : function(file) {   
                $("#file_upload").uploadify("settings","formData", {'projectId':projectId});   
           },   
          'onUploadSuccess':function(file, data, response){ 
        	  $('#' + file.id).find('.data').html(' 上传完毕');
           },   
          'onUploadComplete':function(file){   
                window.close();   
           }   
      });
  });
  
	  function startUpload(){   
		  projectId = $("#projectId").val();
		  if(projectId.replace(/\s/g,'') == '')
		  {
			  alert("projectId不能为空！");   
	          return false;    
		  }else
	      {
			  $('#file_upload').uploadify('upload','*');   
	      }
	   } 
  
  function beforeSubmit() {
      if(isEmpty($("#expectedTime").val())) { $('#error_label').text("错误信息：预计时间不能为空！"); 
      	$("#p_error").show();
      	$("#btn_insert").removeAttr("disabled");
      	return false; }
      
      var str = $("#connector").val(); 
      var reg=new RegExp(/[0-9]/);
      if(reg.test(str)){
      }else{
       $('#error_label').text("错误信息：请填写客户经理电话！"); 
       $("#p_error").show();
   	   $("#btn_insert").removeAttr("disabled");
       return false;
      }
      
//       if(isEmpty($("#password").val())) { alert("初始密码不能为空！"); return false; }
//       if(!validatePassword($("#password").val(), 4, 22)) { alert("初始密码不符合规格！"); return false; }
      
// 	  if(isEmpty($("#cnname").val())) { alert("别名不能为空！"); return false; }
// 	  if(!validateSize($("#cnname").val(), 2, 32)) { alert("别名不符合规格！"); return false; }
	  
// 	  if(!isEmpty($("#mobile").val()) && !isMobile($("#mobile").val())) { alert("手机号不符合规格！"); return false; }  
// 	  if(!isEmpty($("#email").val()) && !isEmail($("#email").val())) { alert("Email不符合规格！"); return false; }
	  
	  return true;
  }
  
  function process(responseJson) {
	  $("#btn_insert").removeAttr("disabled");
      if(responseJson.code == 0) {
          $('#error_label').text("错误信息：" + responseJson.message);
          $("#p_error").show();
          return;
      }
      else
	     {   
	    	 $("#projectId").val(responseJson.projectId);
	    	 if(confirm('添加成功是否上传附件?'))
       	 {  
	    		 $("#title").val('');
	    		 $("#insertdiv").hide();
       		 $("#uploadDiv").show();
       	 }else
       	 {
       		var qs = $("#qs").val();
            location.href = "<%=basePath%>pjcost/project/userList.do?" + qs;	
       	 }
	     }
        
  }
  
  
  function moveRight(value){
      if(value == null) return;
      
      var text = $("#allRoles option[value="+ value +"]").text();
      var str = $("#allRoles option[value="+ value +"]").attr("deptNo");
      
      var html = "<option value='"+value+"' deptNo='"+str+"'>"+text+"</option>";
      $("#selectedRoles").append(html);
      
      $("#allRoles option[value="+ value +"]").remove();
      
  };

  function moveLeft(value){
      var pvalue = $("#depts").val();
      if(value == null) return;
      var text = $("#selectedRoles option[value="+ value +"]").text();
      
      var str = $("#selectedRoles option[value="+ value +"]").attr("deptNo");
	  if(str == pvalue){
          var html = "<option value='"+value+"' deptNo='"+str+"'>"+text+"</option>";
          $("#allRoles").append(html);
	  }
      $("#selectedRoles option[value="+ value +"]").remove();
      
  };
  function hid(){
		$("#select1").hide();
		$("#select2").hide();
		$("#select3").hide();
		$("#select4").hide();
		$("#select5").hide();
		$("#select6").hide();
	  	  };
	  	function showselect(){
			$("#select1").show();
			$("#select2").show();
			$("#select3").show();
			$("#select4").show();
			$("#select5").show();
			$("#select6").show();
		  	  };
	function conf(){
 		var length = $("#selectedRoles option").length;
        var value = "";
        var valuecn = "";
        $("#selectedRoles option").each(function(i){
            value = value + $(this).val();
            valuecn = valuecn + $(this).text();
            if(i != length - 1) {
            	value += ",";
            	valuecn += ",";
            }
        });
        $("#operator").val(value);
        $("#operator2").val(valuecn);
        hid();
 	 	  };
  function change(){
	  var pvalue = $("#depts").val();
	  $("#allRoles").empty();
	  $("#allRoles").innerHTML = ""; // 清空下拉菜单
	  if(pvalue == null || pvalue == "") {
// 		  <c:forEach items="${users}" var="myList" varStatus="status">
// 		  	  var flag1 = true ;
// 		  	  var id1	= "<c:out value="${myList.deptNo}"></c:out>";
//     		  $("#selectedRoles option").each(function(i){
// 	                var value = $(this).val();
// 	                if(id1 == value){
// 	                	flag1 = false;}
// 	            });
//     	  		if(flag1){
//     	  			var html = "<option value='"+"<c:out value="${myList.enname}"></c:out>"+"' deptNo='"+"<c:out value="${myList.deptNo}"></c:out>"+"'>"+"<c:out value="${myList.cnname}"></c:out>"+"</option>";
//     	  			$("#allRoles").append(html);
//     	  		}
// 		  </c:forEach>
		  return;
	  }
	  <c:forEach items="${users}" var="myList" varStatus="status">
	  		var partitionsId	= "<c:out value="${myList.deptNo}"></c:out>";
	  		var id	= "<c:out value="${myList.enname}"></c:out>";
	  		var flag = true ;
	  		if(partitionsId != pvalue ){
	  			flag = false;}
  	  	$("#selectedRoles option").each(function(i){
            var value = $(this).val();
            if(id == value){
            	flag = false;}
        });
	  		if(flag){
	  			var html = "<option value='"+"<c:out value="${myList.enname}"></c:out>"+"' deptNo='"+"<c:out value="${myList.deptNo}"></c:out>"+"'>"+"<c:out value="${myList.cnname}"></c:out>"+"</option>";
	  			$("#allRoles").append(html);
	  		}
	  		
			</c:forEach>
  };
  
  function moveRightAll(){
 	 var allRoles = $("#allRoles option");
 	 for(var i=0;i<allRoles.length;i++){
 		 var value = allRoles[i].value;
 		 if(value == null) continue;
 		 moveRight(value);
 	 }
   }
   function moveLeftAll(){
 	  var selectedRoles = $("#selectedRoles option");
 	  for(var i=0;i<selectedRoles.length;i++){
     		 var value = selectedRoles[i].value;
      		 if(value == null) continue;
      		 moveLeft(value);
 	  }
   }
   
   function backList(){
	   var qs = $("#qs").val();
       location.href = "<%=basePath%>pjcost/project/userList.do?" + qs;
	   }
   
</script>
</head>
<body>
  <div style="width: 1408px;">
  <div id="insertdiv">
    <fieldset>
      <legend>新增项目：</legend>
      <form id="userForm" method="post" action="pjcost/project/insert.do">
        <input id="qs" name="qs" type="hidden" value="${qs}"/>
        <input id="projectId" name="projectId" type="hidden" />
        <input type="hidden" name="lastModifyTime" id="lastModifyTime" value="1000-01-01 11:11:11" />
        <input type="hidden" name="code" id="code" value="0" />
        <input type="hidden" name="applyUser" id="applyUser" value="${username}" />
        <input type="hidden" name="operator" id="operator" value="" />
      	<p id = "p_error" style = "margin:10px 10px;">
      	    <label id="error_label" style="color:red;"></label>
      	</p>
        <table>
        	<tr>
            <td><label for="province">省份：</label></td>
            <td colspan="2">
            	<select id="province" name="province" >  
           			<c:forEach var="province" items="${provinces}" varStatus="status">
        				<option value="${province.key}">${province.value}</option>
        			</c:forEach>
        			</select>
        			<font color="red">&nbsp;*&nbsp;&nbsp;</font>
            </td>
          </tr>
          <tr>
            <td><label for="name">项目名：</label></td>
            <td colspan="2">
            	<input type="text" name="name" id="name" value="" />
            	<font color="red">&nbsp;*&nbsp;&nbsp;</font>
            </td>
            </tr> 
          <tr>
            <td><label for="applyUser">申请人：</label></td>
            <td colspan="2">
            	<input type="text" name="applyUser" id="applyUser" disabled="disabled" value="${usercnname}" />
            	<font color="red">&nbsp;*&nbsp;&nbsp;</font>
            </td>
            </tr> 
          <tr>
            <td><label for="operator">经办人：</label></td>
            <td colspan="2">
            	<input type="text" name="operator2" id="operator2" disabled="disabled" value="" />
            	<input type="button" id="btn_show" value="请选择" onclick="showselect();" style="width:80px;" />
            	<font color="red">&nbsp;*&nbsp;&nbsp;</font>
            </td>
            </tr>
			     <tr id = "select1" style="display:none;"><td><label>所属部门：</label></td></tr>
                 <tr id = "select2" style="display:none;">
                   <td>
	                 <select name="depts" id="depts" style="width: 150px;" onchange="change();">
	                 	<option value=""></option>
	                 	<c:forEach items="${depts}" var="myList" varStatus="status">
	                 		<option value="${myList.deptNo}">${myList.deptName}</option>
	                 	</c:forEach>
	                 </select>
	               </td>  
                 </tr>
                  <tr id = "select3" style="display:none;">
                      <td><label>该部门下未选择人员：</label></td>
                      <td></td>
                      <td><label>已选择人员：</label></td>
                  </tr>
                  <tr id = "select4" style="display:none;">
                      <td>
                          <select id="allRoles" name="allRoles" multiple="multiple" style="width: 165px; height: 200px;" >
                          </select>
                      </td>
                      <td style="text-align: center;">
                          <input id="btn_allright" type="button" value="&gt;&gt;" style="width: 36px;"/><br/><br/>
                          <input id="btn_right" type="button" value="&gt;" style="width: 36px;"/><br/><br/>
                          <input id="btn_left" type="button" value="&lt;" style="width: 36px;"/><br/><br/>
                          <input id="btn_allleft" type="button" value="&lt;&lt;" style="width: 36px;"/>
                      </td>
                      <td>
                          <select id="selectedRoles" name="selectedRoles" multiple="multiple" style="width: 165px; height: 200px;">
                          </select>
                      </td>
                  </tr>
              <tr style="clear: both;" id = "select5" style="display:none;"></tr>
              <tr id = "select6"  style="display:none;">
                  <td><input type="button" id="btn_submit" value="确认" onclick="conf();" style="width:80px;" />
                  <input type="button" id="btn_back" value="返回" onclick="hid();" style="width:80px;" /></td>
              </tr>
           <tr>
            <td><label for="expectedTime">预计实现时间：</label></td>
            <td colspan="2">
            	<input type="text" name="expectedTime" id="expectedTime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" value="${expectedTime}" />
            	<font color="red">&nbsp;*&nbsp;&nbsp;</font>
            </td>
            </tr> 
          <tr>
            <td><label for="projectedScale">预计规模：</label></td>
            <td colspan="2">
            	<input type="text" name="expectedScale" id="expectedScale" value="" />
            </td>
          </tr> 
          <tr>
            <td><label for="connector">客户经理：</label></td>
            <td colspan="2">
            	<input type="text" name="connector" id="connector" value="" />
            	<font color="red">&nbsp;*&nbsp;&nbsp;</font>
            	<label for="connector">请自行写入客户联系人姓名及电话号码，可支持填写多人</label></td>
            </tr>
          <tr>
          	<td><label for="customerContactor">用户联系人：</label></td>
            <td colspan="2">
            	<input type="text" name="customerContactor" id="customerContactor" value="" />
            </td>
          </tr>
          <tr>
            <td><label for="customerPhone">用户联系人电话：</label></td>
            <td colspan="2">
            	<input type="text" name="customerPhone" id="customerPhone" value="" />
            </td>
            </tr> 
          <tr>
            <td><label for="customerCompany">用户单位名称：</label></td>
            <td colspan="2">
            	<input type="text" name="customerCompany" id="customerCompany" value="" />
            </td>
          </tr>
          <tr>
            <td valign="top"><label for="description">项目描述：</label></td>
            <td valign="top" colspan="2"><textarea name="description" id="description" cols="60" rows="5"><c:out value="${user.remark }"/></textarea>
            <font color="red">&nbsp;*&nbsp;&nbsp;</font>
            </td>
          </tr>         
          <tr>
            <td></td>
            <td colspan="2">
            	<input type="submit" id="btn_insert" value="提交" style="width:80px;" />
            	<input type="button" id="btn_back" value="返回" onclick="backList();" style="width:80px;" />
            </td>
          </tr>
        </table>
      </form>
      
    </fieldset>
  </div>
  <div id="uploadDiv" style="display: none;">
		<fieldset>
		   <legend>上传附件：</legend>
		   <input type="file" name="uploadify" id="file_upload" />   
		   <hr>   
           <a onclick="startUpload();" href="javascript:void(0);">开始上传</a>    
           <a href="javascript:$('#file_upload').uploadify('cancel', '*')" >取消所有上传</a>   
        </fieldset>
        <input type="button" id="btn_back" value="返回列表页面" onclick="backList();" style="width:80px;" />
    </div>
    </div>
</body>
</html>